<template>
	<view class="progress-box">
		<view class="progress-box-sgin" :style="[{width:boxSginWidth+'px'}]">
			<view class="progress-box-sgin-n" :animation="animationData">
			<!-- <view class="progress-box-sgin-n" > -->
			   <text>{{nowD+(sumD == null ?'':'/'+sumD)}}</text>
			   
			</view> 
		</view>

		<view class="progress-box-w">
			<view class="progress-box-w-n" :style="[{width:mobilePx+'px'}]" ></view>
		</view>
		
	</view>
</template>

<script>
	export default {
		created: function() {
			var animation = uni.createAnimation({
				duration: this.time,
				timingFunction: this.type,
			})
			this.animation = animation
			this.cpMobile()
			setTimeout(function() {
				var num = 0
                if(this.nowD < 10000){ num = 0}
				else if(this.nowD >= 10000 && this.nowD < 100000){ num = 3}
				else if(this.nowD >= 100000 ){ num = 5}
				animation.translate(this.mobilePx-num).step()
				this.animationData = animation.export()
			}.bind(this), 100)
		},
		props: {
			nowD: {},
			sumD: {},
			content: '',
			time:{
				type: Number,
				default: 1000
			},
			type:{
				type: String,
				default: "ease"
			}
	
		},

		data() {
			return {
				animationData: {},
				mobilePx: 0,
				boxSginWidth:0
			};
		},
		mounted() {
			var _this = this
			this.$nextTick(function(){
				// console.log(this.nowD)
				// console.log(this.mobilePx)
				let obj = uni.createSelectorQuery().select('.progress-box-sgin-n')
				obj.boundingClientRect(res=> {
					console.log(res)
					 _this.boxSginWidth = _this.rpxToPx(600) + res.width
					 
				}).exec()
			})			
		},
		methods: {
			cpMobile() {
				if(this.nowD == 0){
					this.mobilePx = 0
				}else if(this.sumD == null){
					this.mobilePx = this.rpxToPx(600)
				}
				else{
					this.mobilePx = this.rpxToPx(this.nowD / this.sumD * 600)
				}
				// console.log(this.nowD / this.sumD * 600)
			},
			// rpx转px
			rpxToPx(rpx) {
				const screenWidth = uni.getSystemInfoSync().screenWidth
				return (screenWidth * Number.parseInt(rpx)) / 750
			}
		}
	}
</script>

<style>
	.progress-box-w {
		width: 600rpx;
		height: 14rpx;
		margin: 0 auto;
		margin-top: 14rpx;
		background: rgb(136, 143, 167, .5);
		overflow:hidden;
		border-radius: 10rpx;
	}

	.progress-box-w-n {
		height: 14rpx;
		background-color: #FFFFFF;
		width: 20rpx;
		border-radius: 20rpx;
	}
	.progress-box-sgin{
		margin: 0 auto;
	}
	.progress-box-sgin-n {
		position: relative;
		text-align: center;
		padding: 0 8rpx;
		font-size: 24rpx;
		display: inline-block;
		border-radius: 4rpx;
		background: #FFFFFF;

	}
	.progress-box-sgin-n:after {
		position: absolute;
		left: 0rpx;
		right: 0;
		top: 28rpx;
		content: '';
		width: 0;
		height: 0;
		margin: auto auto;
		border: 16rpx solid #FFFFFF;
		border-color: #FFFFFF transparent transparent transparent;
	}
</style>
